DOM操作寫法

Html的id屬性可用來辨別DOM，也可使用class。

• #id 整個Html一個id 只能對應唯一一個 DOM
• .class 整個Html一個class 可以對應多個 DOM

DOM抓取寫法 :

• document.getElementById('id') : 只能抓取有id屬性的DOM
• document.querySelector('#idName') (找id，在id前加 # )
  document.querySelector('.className') (找class，在class前加 . )
  querySelector會找到第一個符合條件的DOM

var element = document.querySelector('.className');
//搜尋會從上找到下，找出class為'className'的第一個 Dom

• document.querySelectorAll('.className')

var elementAll = document.querySelector('.className');
//搜尋會從上找到下，找出class為'className'的全部 Dom

elementAll[0].textContent = "第一個class為className的DOM";
elementAll[1].textContent = "第二個class為className的DOM";
elementAll[2].textContent = "第三個class為className的DOM";

querySelectorAll會找到全部符合條件的DOM，並且以陣列方式回傳。

setAttribute設定屬性

setAttribute 可以用JS動態變更或新增 Html的屬性。

var googleSite = document.querySelector('#google');
googleSite.setAttribute('href','www.google.com');

先用querySelector抓取DOM，再利用setAttribute增加href的屬性，值為google的網址。